<template>
  <view>
    <view class="unction_list">
      <block v-for="(item, index) in fileList" :key="index">
        <view class="unction_btn" @click="goToPage(item)" v-if="item.url">
          <text class="font_div">{{item.title}}</text>
          <view class="arrow"> </view>
        </view>
      </block>
    </view>
  </view>
</template>

<script>
import { getBankQrcodeFilesApi } from '@/service/qrCode/qrCode.service.js'
export default {
  data () {
    return {
      fileList: []
    }
  },
  methods: {
    goToPage (item) {
      // #ifdef H5
      location.href = item.url;
      // #endif
    },
    getBankQrcodeFiles() {
      getBankQrcodeFilesApi({}, res => {
        if (res.status == 0) {
          this.fileList = [{
            title: '跨地区使用申请表、承诺书',
            url: res.data.unionCrossContract
          }, {
            title: '银联商务特约商户支付业务申请书',
            url: res.data.unionBusinessContract
          }, {
            title: '银联商务特约商户支付服务协议',
            url: res.data.unionServiceContract
          }];
          // this.unionBusinessContract = res.data.unionBusinessContract; // 银联业务申请表文档 ,1
          // this.unionCrossContract = res.data.unionCrossContract; // 银联跨区申请表文档 ,1
          // this.unionServiceContract = res.data.unionServiceContract; // 银联服务协议文档 1
        }
      })
    }
  },
  onShow() {
    this.getBankQrcodeFiles();
  }
}
</script>

<style lang="scss" scoped>
  .font_div{
    font-size:28rpx;
    font-family:PingFang SC;
    font-weight:500;
    color:rgba(51,51,51,1);
  }
  .unction_list{
    width: 100%;
    background:#FFF;
  }
  /* 列表 */
  .unction_btn {
    width: 718.8rpx;
    height: 97rpx;
    line-height: 97rpx;
    border-bottom: 2rpx solid #E1E1E1;
    opcity: 0.5;
    position: relative;
    padding-left:31rpx;
    &:last-child {
      border-bottom: none;
    }
  }
  // .unction_btn>text {
  //   position: absolute;
  //   left: 8rpx;
  // }
  
  .unction_btn .arrow{
    position: absolute;
    right: 29rpx;
    top: 40rpx;
  }
  /* 三角形 */
  .arrow {
    border-right: 3rpx solid #8A8A8A;
    border-top: 3rpx solid #8A8A8A;
    height: 18rpx;
    width: 18rpx;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    /*不加这两个属性三角会比上一个略丑, 大家可以试一下*/
    border-left: 2rpx solid transparent;
    border-bottom: 2rpx solid transparent;
  }
</style>
